<script setup>
let sortList = [{ name: "全部文件", id: "all" }, { name: "图片", id: "photo" }, { name: "音乐", id: "music" }, { name: "视频", id: "video" }, { name: "文档", id: "word" }, { name: "其他", id: "others" }]
let operateList = [{ name: "上传文件", id: "upload" }, { name: "新建文件夹", id: "newFolder" }, { name: "下载", id: "download" }, { name: "分享", id: "share" }, { name: "复制", id: "copy" }, { name: "删除", id: "delete" }, { name: "移动", id: "move" }]
//被选中给的分类菜单按钮
let focus_btn = ref("all")
//分类菜单按钮点击方法
function menuClick(name) {
    //请求方法：

    focus_btn.value = name;
}
//选中的表格数据
let multipleSelection = ref([])
//详情展示的数据
let selectFile = ref({ fileName: "美女视频.png", uploadTime: "2024年11月1日", fileFormat: "video", fileSize: "114514", parent: "我的文件" })
//表格展示的数据
let tableData = ref([{ id: '1', fileName: "美女视频.png", uploadTime: "2024年11月1日", fileFormat: "video", fileSize: "114514", parent: "我的文件" },
{ id: '2', fileName: "1美女视频.png", uploadTime: "2024年11月2日", fileFormat: "video", fileSize: "114514", parent: "我的文件" },
{ id: '3', fileName: "2美女视频.png", uploadTime: "2024年11月3日", fileFormat: "video", fileSize: "114514", parent: "我的文件" },
{ id: '4', fileName: "3美女视频.png", uploadTime: "2024年11月4日", fileFormat: "video", fileSize: "114514", parent: "我的文件" }])
//表格事件
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(multipleSelection.value)
}
function rowClick(row) {
    selectFile.value = row
}

//按钮事件分发
function handleBtnClick(flag) {
    if (flag == "upload") {
        handleUpload()
    } else if (flag == "newFolder") {
        handleNewFolder()
    } else if (flag == "download") {
        handleDownload()
    } else if (flag == "share") {
        handleShare()
    } else if (flag == "copy") {
        handleCopy()
    } else if (flag == "delete") {
        handleDelete()
    } else if (flag == "move") {
        handleMove()
    }
}

//上传文件按钮的事件
function handleUpload() {
    console.log("handleUpload")
    uploadDialog.value = true
}

//新建文件夹事件
function handleNewFolder() {
    console.log("handleNewFolder")

}

//下载事件
function handleDownload() {
    console.log("handleDownload")

}

//分享事件
function handleShare() {
    console.log("handleShare")
    shareDialog.value = true

}

//复制事件
function handleCopy() {
    console.log("handleCopy")
    copyDialog.value = true
}

//删除事件
function handleDelete() {
    console.log("handleDelete")

}

//移动事件
function handleMove() {
    console.log("handleMove")
    moveDialog.value = true

}

//消息框flag
const uploadDialog = ref(false)
const shareDialog = ref(false)
const copyDialog = ref(false)
const moveDialog = ref(false)

//上传相关方法
let readyFileList = ref([])
function onChange(file,fileList){
    readyFileList.value = fileList
    console.log(readyFileList.value[0].name)
}
//提交文件方法
function handleUploadConfirm(){

    
}
</script>

<template>
    <div class="content_box">
        <div class="sort_box">
            <div :class="{ 'slected_btn': focus_btn == key.id }" class="sort_btn_box" @click="menuClick(key.id)" id=""
                v-for="key in sortList">{{ key.name }}</div>
        </div>
        <div class="small_content_box">
            <div class="search_box">
                <div class="left_box">
                    <div @click="handleBtnClick(key.id)" v-for="key in operateList" class="operate_btn">
                        {{ key.name }}
                    </div>
                </div>
                <div class="right_box">
                    <div class="search_input_box">
                        <input class="search_input" type="text" placeholder="搜索我的文件">
                        <div class="search_btn">搜索</div>
                    </div>
                </div>
            </div>
            <div class="show_box">
                <div class="list_box">
                    <el-table @row-click="rowClick" ref="tableRef" :data="tableData" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="文件名" width="360">
                            <template #default="scope">
                                <div class="template1">
                                    <img class="img_icon"
                                        :src="'src/assets/img/cloud/' + scope.row.fileFormat + '.png'">
                                    <div class="file_name_box">{{ scope.row.fileName }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column property="uploadTime" label="修改时间" width="240" />
                        <el-table-column property="fileSize" label="大小" />
                    </el-table>
                </div>
                <div class="detail_box">
                    <div class="detail_title">文件详情</div>
                    <img :src="'src/assets/img/cloud/' + selectFile.fileFormat + '.png'" class="detail_img"></img>
                    <div class="detail_info">
                        <div class="file_name">{{ selectFile.fileName }}</div>
                        <div class="file_info">上传时间：{{ selectFile.uploadTime }}</div>
                        <div class="file_info">文件格式：{{ selectFile.fileFormat }}</div>
                        <div class="file_info">文件大小：{{ selectFile.fileSize }}</div>
                        <div class="file_info">所在目录：{{ selectFile.parent }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 上传消息框 -->
    <el-dialog v-model="uploadDialog" title="文件上传" width="500">
        <el-upload :auto-upload='false' :on-change="onChange" class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                Drop file here or <em>click to upload</em>
            </div>
        </el-upload>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="uploadDialog = false">Cancel</el-button>
                <el-button type="primary" @click="handleUploadConfirm">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 分享消息框 -->
    <el-dialog v-model="shareDialog" title="Tips" width="500">
        <span>This is a message</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 复制消息框 -->
    <el-dialog v-model="copyDialog" title="Tips" width="500">
        <span>This is a message</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 移动消息框 -->
    <el-dialog v-model="moveDialog" title="Tips" width="500">
        <span>This is a message</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
@import "../assets/css/cloud.css";
</style>